<template>
  <div>
    <el-form
      ref="formDataSysBusinessSampleInfo"
      class="base-pipeline-layout"
      :model="formDataSysBusinessSampleInfo"
      :rules="formDataSysBusinessSampleInfoRules"
      status-icon
      label-width="110px"
    >
      <el-form-item
        label="样品编号"
        prop="sampleNum"
        :error="errorMsgSysBusinessSample.sampleNum"
      >
        <el-input
          v-model="formDataSysBusinessSampleInfo.sampleNum"
          :disabled="!isCustom"
          autocomplete="off"
          style="width: 350px"
        ></el-input>
        <el-checkbox
          v-model="isCustom"
          style="margin-left: 30px"
          @change="handleCustom"
          >自定义</el-checkbox
        >
      </el-form-item>
      <el-form-item
        label="样品名称"
        prop="sampleName"
        :error="errorMsgSysBusinessSample.sampleName"
      >
        <el-input
          v-model="formDataSysBusinessSampleInfo.sampleName"
          :disabled="readOnly"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="检验类别"
        prop="samplingWayCode"
        :error="errorMsgSysBusinessSample.samplingWayCode"
      >
        <el-select
          v-model="formDataSysBusinessSampleInfo.samplingWayCode"
          :disabled="readOnly"
          placeholder="请选择检验类别"
          @change="samplingWayCodeChange"
        >
          <el-option
            v-for="item in packageStatusList"
            :key="item.value"
            :label="item.name"
            :value="Number(item.value)"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="检测项目"
        prop="detectionItemName"
        :error="errorMsgSysBusinessSample.detectionItemName"
      >
        <el-input
          v-model="formDataSysBusinessSampleInfo.detectionItemName"
          disabled
          style="width: 100%"
          autocomplete="off"
        ></el-input>
        <div class="chioseDetectionItem" @click="chioseDetectionItem">+</div>
      </el-form-item>
      <el-form-item v-if="itemShow" style="width: 100%">
        <el-table :data="detectionData" border style="width: 100%">
          <el-table-column
            prop="detectionItemName"
            label="检测项目"
            width="180"
          >
          </el-table-column>
          <el-table-column
            prop="methodStandardNum"
            label="方法标准编号"
            width="180"
          >
          </el-table-column>
          <el-table-column prop="nationalStandardNum" label="产品标准编号">
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item
        label="产品型号"
        :error="errorMsgSysBusinessSample.sampleModel"
      >
        <el-input
          v-model="formDataSysBusinessSampleInfo.sampleModel"
          :disabled="readOnly"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="注册商标"
        :error="errorMsgSysBusinessSample.trademark"
      >
        <el-input
          v-model="formDataSysBusinessSampleInfo.trademark"
          :disabled="readOnly"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="生产日期"
        :error="errorMsgSysBusinessSample.manufactureDate"
      >
        <el-date-picker
          v-model="formDataSysBusinessSampleInfo.manufactureDate"
          :disabled="readOnly"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item
        label="产品状态"
        :error="errorMsgSysBusinessSample.sampleStatus"
      >
        <el-input
          v-model="formDataSysBusinessSampleInfo.sampleStatus"
          :disabled="readOnly"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="产品批(罐)号"
        :error="errorMsgSysBusinessSample.sampleBatchNum"
      >
        <el-input
          v-model="formDataSysBusinessSampleInfo.sampleBatchNum"
          :disabled="readOnly"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="产品包装"
        :error="errorMsgSysBusinessSample.samplePackage"
      >
        <el-input
          v-model="formDataSysBusinessSampleInfo.samplePackage"
          :disabled="readOnly"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="进货日期"
        :error="errorMsgSysBusinessSample.purchaseDate"
      >
        <el-date-picker
          v-model="formDataSysBusinessSampleInfo.purchaseDate"
          :disabled="readOnly"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item
        label="产品等级"
        :error="errorMsgSysBusinessSample.sampleGrade"
      >
        <el-input
          v-model="formDataSysBusinessSampleInfo.sampleGrade"
          :disabled="readOnly"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="存放条件"
        :error="errorMsgSysBusinessSample.storageConditions"
      >
        <el-input
          v-model="formDataSysBusinessSampleInfo.storageConditions"
          :disabled="readOnly"
          autocomplete="off"
        ></el-input>
      </el-form-item>
    </el-form>
    <ChoiceDetectionItemDialog
      ref="ChoiceDetectionItemDialog"
      v-model="dialogDetectionItem"
      :generate-button-state="false"
      @DetectionItemClose="detectionItemClose"
    />
  </div>
</template>

<script>
import { getDictList } from "../../../api/System/SystemDict.js";
import { GetListDetectionByEntrustOrderId } from "../../../api/SampleManage/EntrustSampleInfo";
export default {
  name: "FormDataSysBusinessSample",
  components: {},
  props: {
    detectionItem: {
      type: Array,
      default: () => [],
    },
    state: {
      type: Boolean,
      default: false,
    },
    entrustSampleDetection: {
      type: Object,
      default: () => {},
    },
    readOnly: {
      type: Boolean,
      default: false,
    },
    entrustId: {
      type: String,
      default: "",
    },
    sampleNumber: {
      type: String,
      default: "",
    },
    sampleDetectionId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      itemShow: false,
      detectionData: [],
      detectionItemData: [],
      dialogDetectionItem: false,
      chioseDetectionItemState: false,
      // 样品信息
      formDataSysBusinessSampleInfo: {
        id: 0,
        sampleNum: "",
        sampleName: "",
        sampleModel: "",
        trademark: "",
        manufactureDate: null,
        sampleStatus: "",
        sampleBatchNum: "",
        samplePackage: "",
        purchaseDate: null,
        sampleGrade: "/",
        storageConditions: "",
        // 样品管理状态
        sampleManageStatusCode: 10,
        samplingWayCode: "",
        detectionItemName: "",
      },
      formDataSysBusinessSampleInfoRules: {
        sampleNum: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
        sampleName: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
        detectionItemName: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
        sampleModel: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
        trademark: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
        manufactureDate: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunctionPositiveNumber,
          },
        ],
        sampleStatus: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
        sampleBatchNum: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
        samplePackage: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
        purchaseDate: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunctionPositiveNumber,
          },
        ],
        sampleGrade: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
        storageConditions: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
        samplingWayCode: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunctionPositiveNumber,
          },
        ],
      },
      packageStatusList: [],
      errorMsgSysBusinessSample: {
        detectionItemName: "",
        sampleNum: "",
        sampleName: "",
        sampleModel: "",
        trademark: "",
        manufactureDate: "",
        sampleStatus: "",
        sampleBatchNum: "",
        samplePackage: "",
        purchaseDate: "",
        sampleGrade: "",
        storageConditions: "",
        samplingWayCode: "",
      },
      isCustom: false,
    };
  },
  watch: {
    entrustSampleDetection: {
      handler: function(val) {
        if (val != null) {
          this.formDataSysBusinessSampleInfo.sampleName = val.sampleName;
          console.log(
            "sampleNum",
            this.formDataSysBusinessSampleInfo.sampleNum
          );
          if (val.sampleNum !== null && val.sampleNum !== "") {
            this.formDataSysBusinessSampleInfo.sampleNum = val.sampleNum;
          } else {
            this.formDataSysBusinessSampleInfo.sampleNum = this.sampleNumber;
          }
          console.log(
            "sampleNum修改后",
            this.formDataSysBusinessSampleInfo.sampleNum
          );

          this.formDataSysBusinessSampleInfo.detectionItemName =
            val.detectionItemName;
          this.chioseDetectionItemState = true;
        }
      },
      deep: true,
    },
    detectionItem: {
      handler: function(val) {
        this.detectionItemData = val;
      },
      deep: true,
    },
  },
  created() {
    // 获样方式
    getDictList({ dictCode: "SamplingWayCode" }).then((res) => {
      this.packageStatusList = res.data;
      this.formDataSysBusinessSampleInfo.samplingWayCode = Number("1");
    });
  },
  methods: {
    // 检验类别发生改变
    samplingWayCodeChange(val) {
      this.$emit("samplingWayCodeChange", val);
    },
    // 选择检测项目
    chioseDetectionItem() {
      if (!this.entrustId || this.state) {
        if (!this.readOnly) {
          if (!this.chioseDetectionItemState) {
            if (
              this.detectionItemData !== null &&
              this.detectionItemData.length !== 0 &&
              this.detectionItemData !== undefined
            ) {
              this.$refs.ChoiceDetectionItemDialog.sampleDeteciontItemData.push(
                {
                  detectionItemData: JSON.parse(
                    JSON.stringify(this.detectionItemData)
                  ),
                  sysBusinessSampleCategoryId:
                    this.detectionItemData[0].sysBusinessSampleCategoryId,
                }
              );
              // 选择的检测项目表赋值检测项目
              this.$refs.ChoiceDetectionItemDialog.selectedTableData =
                this.detectionItemData;
            }
            this.dialogDetectionItem = true;
          }
        }
      } else {
        this.itemShow = !this.itemShow;
        if (this.itemShow) {
          this.detectionData = [];
          GetListDetectionByEntrustOrderId({
            entrustSampleDetectionId: this.sampleDetectionId,
          })
            .then((res) => {
              this.detectionData = res.data;
            })
            .catch((res) => {});
        }
      }
    },
    // 关闭选择检测项目弹框
    detectionItemClose(data) {
      var detectionItemIdList = [];
      this.detectionItemData = [];
      this.formDataSysBusinessSampleInfo.detectionItemName = "";
      for (let i = 0; i < data.length; i++) {
        for (let o = 0; o < data[i].detectionItemData.length; o++) {
          this.detectionItemData.push(data[i].detectionItemData[o]);
          this.formDataSysBusinessSampleInfo.detectionItemName +=
            data[i].detectionItemData[o].detectionItemName + ",";
          detectionItemIdList.push(data[i].detectionItemData[o].id);
        }
      }
      this.formDataSysBusinessSampleInfo.detectionItemName =
        this.formDataSysBusinessSampleInfo.detectionItemName.substring(
          0,
          this.formDataSysBusinessSampleInfo.detectionItemName.length - 1
        );
      this.$emit("detectionItemClose", detectionItemIdList, data);
    },
    handleCustom(value) {
      this.isCustom = value;
      this.$emit("changeCustom", value);
    },
  },
};
</script>
<style lang="scss" scoped>
.chioseDetectionItem {
  width: 30px;
  color: white;
  font-size: 20px;
  height: 32px;
  text-align: center;
  border-radius: 5px;
  border: 1px silver;
  background-color: #4787ff;
  position: absolute;
  top: 0px;
  right: 0px;
}
</style>
